<template>
  <el-dialog
    title="选择模型"
    v-bind="$attrs"
    @close="handleClose"
    width="540"
    center
  >
    <el-form
      label-position="top"
      :model="form"
      :rules="rules"
      ref="formRef"
      class="tkBox"
      label-width="80px"
    >
      <el-form-item label="选择模型" prop="selectedVendor">
        <el-dropdown
          class="dropdown-wrapper"
          trigger="click"
          placement="bottom-start"
          popper-class="xlClass"
        >
          <span class="el-dropdown-link">
            {{ form.selectedVendor || "请选择" }}
            <i class="el-icon-arrow-down el-dropdown-link-icon"></i>
          </span>

          <el-dropdown-menu slot="dropdown" class="dropdown-wrapper-list">
            <div class="moTitle">选择厂商</div>
            <el-popover
              v-for="(models, provider) in modelList"
              placement="right"
              :value="showMx && showMxType == provider"
            >
              <div class="moTitle">选择模型</div>
              <el-radio-group
                v-model="form.selectedVendor"
                @input="showMx = false"
                class="myradio"
              >
                <el-radio
                  v-for="item in modelList[provider]"
                  :label="item.model_name"
                  >{{ item.model_name }}</el-radio
                >
              </el-radio-group>
              <el-dropdown-item slot="reference" :key="provider">
                <div
                  :class="provider == showMxType ? 'active' : ''"
                  style="
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                  "
                  @mouseover="handleMouseOver(provider)"
                >
                  {{ provider }} <i class="el-icon-arrow-right"></i>
                </div>
              </el-dropdown-item>
            </el-popover>
          </el-dropdown-menu>
        </el-dropdown>
        <div class="moText">{{ getModelDesc(form.selectedVendor) }}</div>
      </el-form-item>
      <el-form-item label="关联上下文" prop="type">
        <el-select
          v-model="form.type"
          placeholder="请选择关联类型"
          style="width: 100%"
        >
          <el-option label="默认关联" :value="1"></el-option>
          <el-option label="不关联" :value="3"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="toolSave">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { conversationDefault, conversationModels } from "@/api/conversations";
export default {
  data() {
    return {
      showMx: false,
      showMxType: "",
      modelShow: false,
      modelTitle: "选择模型",
      modelList: {},
      form: {
        type: 1,
        selectedVendor: "",
      },
      rules: {
        selectedVendor: [
          { required: true, message: "请选择模型", trigger: "change" },
        ],
      },
    };
  },
  created() {
    this.getDefaultModel();
    this.getModelList();
  },
  methods: {
    //鼠标移入
    handleMouseOver(type) {
      this.showMx = true;
      this.showMxType = type;
    },
    //获取模型列表
    async getModelList() {
      let data = await conversationModels({});
      this.modelList = data;
    },
    //获取默认模型
    async getDefaultModel() {
      const response = await conversationDefault();
      this.form.selectedVendor = response.model_name;
    },
    //获取模型描述
    getModelDesc(model_name) {
      const list = Object.values(this.modelList).flat();
      const item = list.find((x) => x.model_name == model_name);
      return item ? item.billing : "";
    },
    //确定
    async toolSave() {
      const { selectedVendor, type } = this.form;
      if (!selectedVendor) {
        this.$message.warning("请选择模型");
        return;
      }
      this.$emit("confirm", selectedVendor, type);
      this.handleClose();
    },
    //关闭
    handleClose() {
      this.$emit("close", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.dropdown-wrapper {
  width: 100%;
}

.moTitle {
  font-size: 12px;
  color: rgba(0, 1, 27, 1);
  padding-left: 17px;
  line-height: 32px;
}

.moText {
  color: var(--color-, rgba(0, 1, 27, 0.5));
  font-family: "PingFang SC";
  font-size: 13px;
  font-weight: 400;
}

.el-dropdown-link {
  color: #333;
  cursor: pointer;
  padding: 7px;
  padding-left: 15px;
  border: 1px solid #c4c6cc;
  border-radius: 4px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
}

.el-dropdown-link-icon {
  margin-left: 5px;
}
.myradio {
  display: flex;
  flex-direction: column;

  .el-radio {
    line-height: 32px;
    margin-bottom: 10px;
  }
}
</style>
